<template>
  <ListLayout class="htgl-htlb-list-wrap">
    <!-- 左侧 -->
    <template slot="top-left" class="top-left-one-warp">
      <el-select placeholder="请选择项目" multiple v-model="projectId" style="width:250px">
        <el-option
          v-for="(item, index) in projectList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </template>
    <!-- 右侧 -->
    <template slot="top-right">
      <el-button>新签合同</el-button>
      <el-popover placement="bottom" trigger="click">
        <p class="xlBtn">导入模板</p>
        <p class="xlBtn">导入记录</p>
        <el-button type="primary" slot="reference">导入合同</el-button>
      </el-popover>
      <el-popover placement="bottom" trigger="click">
        <p class="xlBtn">导出模板</p>
        <p class="xlBtn">导出记录</p>
        <el-button type="success" slot="reference">导出合同</el-button>
      </el-popover>
    </template>

    <!-- tab -->
    <ul class="type-wrap clearFloat" slot="table-search">
      <li
        v-for="(item, index) in typeList"
        :key="index"
        :class="{'active': type === item.code}"
        @click="handleSwitchQueryCondition('type', item.code)"
      >{{item.label}} ({{item.num}})</li>
    </ul>
    <ul class="type-back-wrap clearFloat" slot="table-search">
      <li
        v-for="(item, index) in timeList"
        :key="index"
        :class="{'active': timeType === item.code}"
        @click="handleSwitchTime(item.code)"
      >{{item.label}} ({{item.num}})</li>
    </ul>
    <!-- 筛选条件 -->
    <template slot="table-search">
      <el-form
        slot="top-right"
        :ref="queryFormRef"
        inline
        class="search-form"
        :model="queryFormData"
        @submit.native.prevent
        size="mini"
        style="margin-top:20px;"
      >
        <el-form-item prop="name" label-width="150" label="房间筛选">
          <el-input
            type="text"
            v-model="queryFormData.name"
            clearable
            style="width: 220px;"
            placeholder="项目、分区、楼栋、档层、房间"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同创建日期" label-width="200">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="起始时间"
                v-model="queryFormData.startTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="结束时间"
                v-model="queryFormData.endTime"
                style="width: 100%;"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item prop="name" label="签约类型" label-width="100">
          <select-dict
            url="api/htlb/queryqyType"
            v-model="queryFormData.qyType"
            placeholder="请选择签约类型"
            style="width:150px"
          ></select-dict>
        </el-form-item>
        <el-form-item label="生效日期" label-width="150">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="起始时间"
                v-model="queryFormData.sxstartTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="结束时间"
                v-model="queryFormData.sxendTime"
                style="width: 100%;"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item prop="name" label="是否变更" label-width="150">
          <select-dict
            url="api/htlb/querybgType"
            v-model="queryFormData.qyType"
            placeholder="请选择签约类型"
            style="width:150px"
          ></select-dict>
        </el-form-item>
        <el-form-item prop="name" label-width="150">
          <el-input
            type="text"
            v-model="queryFormData.name"
            clearable
            style="width: 300px;"
            placeholder="客户姓名、联系人、手机号码、经办人"
          >
            <el-button slot="append" icon="el-icon-search" @click="queryHandler()"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </template>
    <list slot="table" class="table-warp" ></list>
  </ListLayout>
</template>

<script>
export default JBoot({
  components: {
    list: require("./list").default
  },
  data() {
    return {
      moduleName: "htlb",
      projectId: "",
      projectList: [],
      type: "all",
      timeType: "all",
      typeList: [
        { label: "全部", code: "all", num: 10 },
        { label: "已暂存", code: "yzc", num: 8 },
        { label: "待生效", code: "dsx", num: 2 },
        { label: "待入住", code: "drz", num: 2 },
        { label: "执行中", code: "zxz", num: 2 },
        { label: "已结束", code: "yjs", num: 2 },
        { label: "已废除", code: "yfc", num: 0 }
      ],
      timeList: [
        { label: "全部", code: "all", num: 10 },
        { label: "1周到期", code: "oneWeek", num: 10 },
        { label: "1个月到期", code: "oneMonth", num: 10 },
        { label: "2个月到期", code: "twoMonth", num: 10 },
        { label: "3个月到期", code: "threeMonth", num: 10 },
        { label: "半年到期", code: "sixMonth", num: 10 },
        { label: "已逾期", code: "overdue", num: 10 }
      ]
    };
  },

  computed: {},

  methods: {
    afterInit() {
      this.$api("project", "queryManageProjectList").then(response => {
        this.$set(this, "projectList", response.data || []);
      });
    },
    handleSwitchQueryCondition(field, value) {
      this.$set(this, "type", value);
      this.queryHandler();
    },
    handleSwitchTime(value) {
      this.$set(this, "timeType", value);
      this.queryHandler();
    },
    getQueryParam() {
      return Object.assign({}, this.queryFormData, {
        type: this.type,
        timeType: this.timeType
      });
    }
  },

  watch: {}
})
  .list()
  .build();
</script>

<style lang="scss">
.htgl-htlb-list-wrap {
  & > .table-wrap {
    float: left;
    & > .search-wrap {
      padding: 10px 0px !important;
      & > .type-wrap {
        height: 35px;
        line-height: 35px;
        border-bottom: solid #eee 1px;
        & li {
          float: left;
          margin: 0 10px;
          cursor: pointer;
          font-size: 14px;
          height: 100%;
          padding: 0 5px;
          border-bottom: 2px transparent;
          transition: color, border-bottom-color 0.3s;
          user-select: none;
          &.active {
            border-bottom: 2px solid #2196f3;
            color: #2196f3;
          }
        }
      }
      & > .type-back-wrap {
        height: 35px;
        line-height: 35px;
        margin-top: 20px;
        & li {
          float: left;
          margin: 0 2px;
          cursor: pointer;
          font-size: 14px;
          height: 100%;
          padding: 0 15px;
          border-bottom: 2px transparent;
          transition: color, border-bottom-color 0.3s;
          user-select: none;
          background-color: #f2f2f2;
          color: #606266;
          &.active {
            background-color: #2196f3;
            color: #fff;
          }
        }
      }
    }
  }
  .top-right {
    .xlBtn {
      text-align: center;
    }
  }
  .table{
     height: calc(100% - 216px)!important;
  }
}
.el-popover {
  min-width: 100px;
  padding: 0px;
  .xlBtn {
    text-align: center;
    line-height: 25px;
  }
  .xlBtn:first-child {
    border-bottom: solid #f2f2f2 1px;
  }
}
</style>
